<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SinmaJS 版本测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .version { border: 1px solid #ddd; margin: 10px 0; padding: 15px; border-radius: 5px; }
        .version h3 { margin-top: 0; color: #333; }
        .test-result { margin: 5px 0; }
        .pass { color: green; }
        .fail { color: red; }
    </style>
</head>
<body>
    <h1>SinmaJS 版本一致性测试</h1>
    
    <div class="version">
        <h3>JavaScript 版本测试</h3>
        <div id="js-test"></div>
    </div>

    <div class="version">
        <h3>jQuery 版本测试</h3>
        <div id="jquery-test"></div>
    </div>

    <div class="version">
        <h3>Vue.js 版本测试</h3>
        <div id="vue-test"></div>
    </div>

    <!-- 引入 jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    
    <!-- 引入 Vue.js 2 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <!-- 测试 JavaScript 版本 -->
    <script src="../javascript/sinma.js"></script>
    <script>
        function testVersion(sinma, targetId, versionName) {
            const results = [];
            const container = document.getElementById(targetId);
            
            // 基础验证测试
            const tests = [
                { name: '版本信息', test: () => typeof sinma.version === 'string' },
                { name: '手机号验证', test: () => sinma.isPhone('13812345678') === true },
                { name: '邮箱验证', test: () => sinma.isEmail('test@example.com') === true },
                { name: '空值检测', test: () => sinma.isEmpty('') === true },
                { name: '数字验证', test: () => sinma.isNumber(123) === true },
                { name: '格式化货币', test: () => typeof sinma.formatCurrency(1234.56) === 'string' },
                { name: '格式化日期', test: () => typeof sinma.formatDate(new Date()) === 'string' },
                { name: '随机字符串', test: () => typeof sinma.randomString(8) === 'string' },
                { name: '数组去重', test: () => Array.isArray(sinma.unique([1,2,2,3])) },
                { name: '对象克隆', test: () => typeof sinma.clone({a:1}) === 'object' },
                { name: '向后兼容别名', test: () => typeof sinma.isPhonenum === 'function' },
                { name: '链式调用', test: () => typeof sinma.chain === 'function' }
            ];

            tests.forEach(test => {
                try {
                    const result = test.test();
                    const className = result ? 'pass' : 'fail';
                    const status = result ? '✓ 通过' : '✗ 失败';
                    results.push(`<div class="test-result ${className}">${test.name}: ${status}</div>`);
                } catch (error) {
                    results.push(`<div class="test-result fail">${test.name}: ✗ 错误 - ${error.message}</div>`);
                }
            });

            container.innerHTML = `<p>共测试 ${tests.length} 项功能</p>` + results.join('');
        }

        // 测试 JavaScript 版本
        testVersion(sinma, 'js-test', 'JavaScript');
    </script>

    <!-- 测试 jQuery 版本 -->
    <script src="../jquery/sinma.js"></script>
    <script>
        // 测试 jQuery 版本
        testVersion(sinma, 'jquery-test', 'jQuery');

        // 测试 jQuery 扩展
        if (typeof $ !== 'undefined') {
            $('#jquery-test').append('<div class="test-result pass">jQuery扩展: ✓ $.sinma 可用</div>');
            $('#jquery-test').append('<div class="test-result pass">jQuery插件: ✓ $.fn.sinmaValidate 可用</div>');
        }
    </script>

    <!-- 测试 Vue.js 版本 -->
    <script src="../vuejs/sinma.js"></script>
    <script>
        // 测试 Vue.js 版本
        testVersion(sinma, 'vue-test', 'Vue.js');

        // 测试 Vue.js 集成
        if (typeof Vue !== 'undefined') {
            // 创建Vue实例来测试集成
            const app = new Vue({
                el: '#vue-app',
                template: '<div style="display:none;"></div>',
                mounted() {
                    const vueTest = document.getElementById('vue-test');
                    if (this.$sinma) {
                        vueTest.innerHTML += '<div class="test-result pass">Vue集成: ✓ $sinma 全局属性可用</div>';
                    }
                    if (this.$validate) {
                        vueTest.innerHTML += '<div class="test-result pass">Vue方法: ✓ $validate 方法可用</div>';
                    }
                    if (typeof sinma.install === 'function') {
                        vueTest.innerHTML += '<div class="test-result pass">Vue插件: ✓ install 方法可用</div>';
                    }
                }
            });
        }
    </script>

    <div id="vue-app"></div>

    <div style="margin-top: 30px; padding: 15px; background-color: #f9f9f9; border-radius: 5px;">
        <h3>API 一致性总结</h3>
        <p>三个版本均提供相同的核心API，包括：</p>
        <ul>
            <li><strong>验证模块</strong>：手机号、邮箱、身份证、银行卡等验证</li>
            <li><strong>字符串模块</strong>：格式化、截断、大小写转换等</li>
            <li><strong>数字模块</strong>：精确运算、货币格式化、随机数等</li>
            <li><strong>日期模块</strong>：格式化、时间戳转换、年龄计算等</li>
            <li><strong>数组模块</strong>：去重、扁平化、分块、排序等</li>
            <li><strong>对象模块</strong>：克隆、合并、属性操作等</li>
            <li><strong>中文模块</strong>：数据脱敏、中文转换等</li>
            <li><strong>工具函数</strong>：实用辅助功能</li>
            <li><strong>向后兼容</strong>：保持旧版本API别名</li>
        </ul>
        <p><strong>版本特色：</strong></p>
        <ul>
            <li><strong>JavaScript版本</strong>：现代ES6+语法，功能完整</li>
            <li><strong>jQuery版本</strong>：ES5兼容语法，提供jQuery插件扩展</li>
            <li><strong>Vue.js版本</strong>：UMD模块化，支持Vue插件、过滤器和指令</li>
        </ul>
    </div>
</body>
</html>